<template>
    <el-card class="preview-card">
        <template #header>
        <div class="preview-header">
            <el-icon><View /></el-icon>
            <span>{{ $t('message.random.promptPreview') }}</span>
            <el-button 
            size="default" 
            type="primary" 
            icon="Promotion" 
            :loading="generationStore.isJob"
            @click="generationStore.generateImages" 
            class="generate-btn ml20"
            >
            {{ $t('message.home.generate') }}
            </el-button>
            <el-switch 
            v-model="translationStore.isTranslate" 
            inline-prompt 
            :active-text="$t('message.common.yes')"
            :inactive-text="$t('message.common.no')"
            />
        </div>
        </template>
        <div class="prompt-content">
        <el-scrollbar height="600px">
            <div class="prompt-content">{{ combinedPrompt }}</div>
            <div class="prompt-content">{{ translationStore.translation }}</div>
        </el-scrollbar>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useGenerationStore } from '@renderer/stores/useGenerationStore';
import { useTranslationStore } from '@renderer/stores/useTranslationStore';

const generationStore = useGenerationStore();
const translationStore = useTranslationStore();

const combinedPrompt = computed(() => generationStore.combinedPrompt);
</script>

<style lang="scss" scoped>
.preview-card {
      border-radius: 12px;

      .preview-header {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--el-color-primary);
        font-weight: 500;
      }

      .prompt-content {
        font-size: 14px;
        line-height: 1.6;
        white-space: pre-wrap;
        color: var(--el-text-color-regular);
      }
}
</style>